<template>
	<view class="note">
		<view class="note-section">
			<u-checkbox-group shape="circle" @change="checkboxGroupChange">
				<view class="note-item u-flex" v-for="(item, index) in lists" :key="index">
					<view class="note-item_avatar">
						<u-image v-if="item.FriendAvatar" width="72rpx" height="72rpx" border-radius="72rpx"
							:src="item.FriendAvatar"></u-image>
						<u-image v-else width="72rpx" height="72rpx" border-radius="72rpx"
							src="/static/images/avatar.jpg"></u-image>
					</view>
					<view class="note-item_content u-flex u-flex-1 u-border-bottom">
						<view class="note-item_content--name u-flex-1">{{item.FriendName}}</view>
						<u-checkbox :name="index" v-model="item.checked"></u-checkbox>
					</view>
				</view>
			</u-checkbox-group>
		</view>
		<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" margin-bottom="45" margin-top="45"
			color="#C1C0C0" />
	</view>
</template>

<script>
	import pageMixin from '@/utils/pageMixin';
	export default {
		mixins: [pageMixin],
		data() {
			return {
				lists: [],
				chooseIds: [],
				status: 'nomore',
				iconType: 'flower',
				loadText: {
					loadmore: this.$t('chat.pull_up'),
					loading: this.$t('chat.loading'),
					nomore: this.$t('chat.note_no_more'),
				},
			}
		},

		onLoad() {
			this.getUserFriendList();
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: this.$t('chat.select_friend')
			});
		},
		onNavigationBarButtonTap(e) {
			var arr = [];
			var that = this;
		
			if (e.type == 'close') {
				that.$u.route({
					type: 'back',
					delta: 1
				});
				return;
			}
		
			this.chooseIds.forEach(function(index) {
				arr.push(that.lists[index])
			});
			if (arr.length > 0) {
				// 获取当前页面栈
				let pages = getCurrentPages()
				// pages数组中的最后一个为当前页面，倒数第二个为上一个页面
				let prevPage = pages[pages.length - 2]
				// 传参
				prevPage.$vm.friends = arr;
		    uni.$emit('checkItem', arr)
				//返回上一页
				this.$u.route({
					type: 'back',
					delta: 1
				})
			}
		},
		components: {},
		computed: {
			i18n() {
				return this.$t('chat')
			}
		},
		methods: {
			getUserFriendList() {
				this.$http.get('/mgr/user/friend/data', {}).then(res => {
					this.lists = res;
				});
			},
			checkboxGroupChange(e) {
				this.chooseIds = e;
			},
			tabChange(index) {
				this.current = index;
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.note {
		padding-bottom: 88rpx;
	}

	.note-section {
		margin-bottom: 24rpx;
	}

	.note-item {
		width: 100%;
		background-color: #fff;
		height: 106rpx;
		padding: 0 24rpx 0 18rpx;

		&_avatar {
			position: relative;
			margin-right: 24rpx;
		}

		&_content {
			height: 100%;

			&--name {
				font-size: 32rpx;
			}

			&--text {
				font-size: 24rpx;
				color: #949C9E;
			}

			.u-checkbox__label {
				display: none;
			}
		}

		&_time {
			font-size: 24rpx;
			height: 76rpx;
			color: #949C9E;
		}
	}

	// .btns{
	// 	padding: 20rpx 40rpx 0;
	// 	.btn{
	// 		margin: 30rpx 60rpx;
	// 	}
	// }
</style>
